<div class="portlet box green">
    <div class="portlet-title">
        <div class="caption"><i class="icon-reorder"></i>Санал асуулга бүртгэх</div>
        <div class="tools">
            <a href="javascript:;" class="collapse"></a>
        </div>
    </div>
    <div class="portlet-body">
        <form class="form-horizontal" method="POST" enctype="multipart/form-data" id="form">
            <input type="hidden" name="id" value="<?php echo $id ? $id : 0 ?>" />

            <div class="control-group">
                <label class="control-label" for="question">Асуулт:</label>
                <div class="controls">
                    <input type="text" name="question" id="question" class="span2 m-wrap" value="<?php echo $question ? $question : '' ?>"/>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="answer">Сонголтууд:</label>
                <div class="controls">
                    <p id="answers_placeholder" >Одоогоор сонголтууд алга. Та <b class="text-success">нэмэх</b> товч дээр дарж хариулт нэмнэ үү.</p>
                    <ol id="answers">
                        <?php for ($i = 0; $i < count($answers); $i++) : ?>
                            <?php if ($i != 0): ?>
                                <?php if ($answers[$i - 1]['id'] == $answers[$i]['parent_id']): ?>
                                    <ol id="<?php echo 'answers' . $answers[$i]['parent_id'] ?>">
                                    <?php elseif ($answers[$i - 1]['parent_id'] != $answers[$i]['parent_id']): ?>
                                    </ol>
                                <?php endif; ?>
                            <?php endif; ?>

                            <li id="<?php echo 'answer' . $answers[$i]['id'] ?>">
                                <?php echo $answers[$i]['body'] ?> 
                                <a onclick="removeAnswer(this, <?php echo $answers[$i]['id'] ?>)" href="javascript:;" class="btn mini red icn-only"><i class="icon-remove icon-white"></i></a>
                                <input type="hidden" name="answers[<?php echo $answers[$i]['id'] ?>][id]" value="<?php echo $answers[$i]['id'] ?>">
                                <input type="hidden" name="answers[<?php echo $answers[$i]['id'] ?>][parent_id]" value="<?php echo $answers[$i]['parent_id'] ?>">
                                <input type="hidden" name="answers[<?php echo $answers[$i]['id'] ?>][body]" value="<?php echo $answers[$i]['body'] ?>">
                            </li>
                        <?php endfor ?>
                    </ol>
                    <select name="parent_id" id="parent_id" class="span2 m-wrap">
                        <option value="0">Үндсэн</option>
                        <?php foreach ($answers as $a): ?>
                            <option value="<?php echo $a['id'] ?>"><?php echo $a['body'] ?></option>
                        <?php endforeach ?>
                    </select>
                    <input type="text" name="answer" id="answer" class="span4 m-wrap tooltips" data-trigger="hover" data-original-title="Сонголтыг оруулаад нэмэх товчыг дарна уу"/>
                    <a class="btn green" onclick="addAnswer()" href="javascript:;"><i class="icon-plus tip-bottom"> </i>Нэмэх</a>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <button class="btn btn-success" type="submit">
                        <i class="icon-pencil icon-white"></i> Хадгалах
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function placeHolderCheck() {
        if ($('#answers li').length === 0) {
            $('#answers_placeholder').show();
        } else {
            $('#answers_placeholder').hide();
        }
    }

    function addAnswer() {
        answer = $('#answer');
        pa = $('#parent_id').val();
        a = $(answer).val();
        c = ($('#answers li').length + 1) * -1;

        if (a) {
            li = document.createElement('li');
            $(li).attr('id', 'answer' + c);
            $(li).html(a);
            $(li).append('<a onclick="removeAnswer(this)" href="javascript:;" class="btn mini red icn-only"><i class="icon-remove icon-white"></i></a>');

            input = document.createElement('input');
            $(input).attr('type', 'hidden');
            $(input).attr('name', 'answers[' + c + '][id]');
            $(input).val(c);
            $(input).appendTo(li);

            input = document.createElement('input');
            $(input).attr('type', 'hidden');
            $(input).attr('name', 'answers[' + c + '][body]');
            $(input).val(a);
            $(input).appendTo(li);

            input = document.createElement('input');
            $(input).attr('type', 'hidden');
            $(input).attr('name', 'answers[' + c + '][parent_id]');
            $(input).val(pa);
            $(input).appendTo(li);

            opt = document.createElement('option');
            $(opt).attr('value', c);
            $(opt).html(a);
            $(opt).appendTo('#parent_id');

            if (pa == 0) {
                $(li).appendTo('#answers');
            } else if ($('#answers' + pa).length) {
                $(li).appendTo('#answers' + pa);
            } else {
                ol = document.createElement('ol');
                $(ol).attr('id', 'answers' + pa);
                $(li).appendTo(ol);
                $('#answer' + pa).after(ol);
            }

            $(answer).val('');
        } else {
            $(answer).tooltip('show');
        }
        placeHolderCheck();
    }

    function removeAnswer(ele, id) {
        if (id) {
            if ($('#answers' + id + ' li').length > 0) {
                alert('Энэ сонголт доторхи сонголтуудыг эхлээд устгана уу.');
                return false;
            } else {
                url = '<?php echo url_for('@poll_answer_delete') ?>/' + id;
                $.ajax({
                    url: url,
                    type: "GET"
                }).done(function(res) {
                    if (res === '1') {
                        $(ele).parent().remove();
                    } else {
                        alert('Сонголт устгах явцад серверт алдаа гарлаа.');
                    }
                });
            }
        } else {
            $(ele).parent().remove();
        }
        placeHolderCheck();
    }

    $(function() {
        placeHolderCheck();
        $('#form').keydown(function(e) {
            if (e.keyCode == 13)
            {
                addAnswer();
                event.preventDefault();
                return false;
            }
        });
    });
</script>